<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>仲裁列表</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
      #container{
        padding:0;
      }
	  .myTaskList {}
	  
	  .myTaskList li {
	      background: #FFF;
	      padding: 0.6rem 0.35rem;
	      padding-bottom: 0;
	      margin-top: 0.13rem;
	      position: relative;
	  }
	  
	  .myTaskList li .import {
	      padding-bottom: 0.5rem;
	      position: relative;
	  }
	  
	  .myTaskList li .import .icon {
	      width: 1.2rem;
	      height: 1.2rem;
	      border-radius: 50%;
	      float: left;
	  }
	  
	  .myTaskList li .import .info {
	      padding-left: 0.4rem;
	      float: left;
	      width: calc(100% - 1.2rem);
	  }
	  
	  .myTaskList li .import .info h3 {
	      font-weight: normal;
	      color: #464646;
	      font-size: 0.3rem;
	      height: 0.4rem;
	      line-height: 0.4rem;
	  }
	  
	  .myTaskList li .import .info .price {
	      margin-top: 0.28rem;
	  }
	  
	  .myTaskList li .import .info .price .left {
	      color: #F30;
	      font-size: 0.35rem;
	      font-weight: bold;
	      height: 0.65rem;
	      line-height: 0.65rem;
	  }
	  
	  .myTaskList li .import .info .price .right {
	      padding: 0px 0.3rem;
	      color: #333;
	      border: 1px solid #F6F6F6;
	      border-radius:1rem;
	      height: 0.65rem;
	      line-height: calc(0.65rem - 2px);
	      display: block;
	      font-size: 0.27rem;
	  }
	  .info .rtMore{
	      padding: 0.1rem 0.52rem;
	      border: 1px solid #F6F6F6;
	      font-size: 0.27rem;
	      color: #333333;
	      border-radius: .24rem;
	      display: flex;
	      align-items: center;
	      cursor: pointer;
	  }
	  .personIcon{
	      height: .25rem!important;
	      width: auto!important;
	  }
	  .statusDiv.flex {
	      display: flex;
	      justify-content: space-between;
	  }
	  
	  .statusDiv {
	      border-top: 1px solid #F9F9F9;
	  }
	  
	  .statusDiv .left {
	      height: 0.95rem;
	      line-height: 0.95rem;
	      font-size: 0.28rem;
	      color: #9F9F9F;
	      padding-right: 0.2rem;
	  }
	  
	  .statusDiv .left img {
	      vertical-align: middle;
	      margin-top: -0.05rem;
	      margin-right: 0.15rem;
	      width: 0.3rem;
	      height: 0.3rem;
	  }
	  
	  .statusDiv .right {
	      height: 0.95rem;
	      line-height: 0.95rem;
	      font-size: 0.28rem;
	      color: #B1B1B1;
	  }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div id="container">
            <template v-if="list!=null">
                <template v-if="list.length>0">
                    <ul class="myTaskList">
						<li v-for="item in list" @click="$.openUrl('my/newArbitrationDetail','my/newArbitrationDetail',{title:'仲裁详情', id: item.id});">
						    <div class="import clearfix">
						        <img :src="item.icon" class="icon" />
						        <div class="info">
						            <h3 class="ell">{{item.title}}</h3>
						            <div class="price disbox" >
						                <div class="left disflex ell">+{{$.parsePrice(item.amount_actual, 2)}}</div> 
						            </div>
						        </div>
						    </div> 
						    <div class="statusDiv disbox flex">
						        <div>
						            <div class="left disflex ell flexItemCenter">
						                <img src="../../../image/icons/time.png" />
						                <font>{{item.report_time | dateFormate}}</font>
						            </div>
						        </div>
						        <div>
						            <div class="right" :style="{color: renderStatusUI(item.status).color}">{{renderStatusUI(item.status).text}}</div>
						        </div>
						    </div>
						</li>
                    <ul>
                    <div class="loadText">
                        <div class="weui-loadmore" v-if="hasMore">
                            <i class="weui-loading"></i>
                            <span class="weui-loadmore__tips">正在加载</span>
                        </div>
                        <span v-else class="over">我已经到底啦！</span>
                    </div>
                </template>
                <template v-else>
                    <div class="loadFull whiteBg">
                        <section class="m-no">
                            <div class="u-img"></div>
                            <div class="u-spec">暂无数据</div>
                        </section>
                    </div>
                </template>
            </template>
            <template v-else>
                <div class="loadFull whiteBg">
                    <div class="se-loading"></div>
                </div>
            </template>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
                    report: 0, // 0:接单人； 1: 派单人
                    status: '',
                    page: 1,
                    list:null,
                    hasMore: true,

                    iosTest:false,
				},
				filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'MM-dd hh:mm');
                    },
                },
                methods:{
					renderStatusUI: function(status){
                        var report = this.report;
                        var gray = 'rgb(160, 162, 160)';
                        var red = 'rgb(245, 13, 13)';
                        var green = '#49B447';
                        var blue = 'rgb(6, 78, 241)';
                        var yellow = 'rgb(245, 120, 13)';
                        var statusInfo = {
                            '0': {text: '待审核', color: gray},
                            '1': {text: report == 1 ? '胜诉' : '败诉', color: report == 1 ? green: red},
                            '2': {text: report == 1 ? '败诉' : '胜诉', color: report == 1 ? red : green},
                            '3': {text: report == 1 ? '我方复审' : '对方复审', color: yellow},
                            '4': {text: report == 1 ? '对方复审' : '我方复审', color: yellow},
                            '5': {text: '我方复审', color: yellow},
                            '6': {text: '判平', color: blue},
                            '7': {text: '判平', color: blue},
                        };
                        return statusInfo[status];
					},
                    getList: function(load){
                        var ajaxTag = 'arbitrationList';
                        api.cancelAjax({tag: ajaxTag});

                        var _this = this;
                        var report = this.report;
                        var status = this.status;
                        var page = this.page;
                        $.ajax({
                            url: '/task/arbitration/my_info?report='+report+'&status='+status+'&page='+page,
                            method: 'get',
                            load: load,
                            tag: ajaxTag,
                            success: function(res){
                                var list = res.data.result;
                                var hasMore = list.length >= res.data.pagesize;
                                if(page == 1 ){
                                    _this.list = list;
                                }else{
                                    _this.list = _this.list.concat(list);
                                }
                                _this.page += 1;
                                _this.hasMore = hasMore;
                            },
                        });
					},
                },
                mounted(){
					this.getList();
					$.initJs(this);
                }
            }); 

            $.pullDown({
                success:function(){
                    app.page = 1;
                    app.hasMore = true;
                    app.getList();
                }
            });

            //上拉加载
            api.addEventListener({
                name:'scrolltobottom',
                extra:{threshold:10}
            }, function(ret, err){
                app.getList();
            });
            
            api.addEventListener({
                name: 'arbitrationListChange'
            }, function(ret, err) {
                if(!ret){
                    return false;
                }
                app.report = ret.value.report;
                app.status = ret.value.status;
                app.page = 1;
                app.hasMore = true;
                app.list = null;
                app.getList();
            });
        }
    </script>
</body>
</html>
